<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>热门服务</title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="../favicon.ico">
    <link rel="icon" type="image/png" href="../images/logo.png">
    
    <script src="../js/tailwindcss-3.4.17.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#10b981',
                        'primary-dark': '#059669',
                        secondary: '#3b82f6',
                        accent: '#f59e0b',
                        danger: '#ef4444',
                        neutral: '#f9fafb',
                        'text-primary': '#1f2937',
                        'text-secondary': '#6b7280'
                    }
                }
            }
        }
    </script>
    <link rel="stylesheet" href="../css/all.min.css">
    <link rel="stylesheet" href="../css/common.css">
</head>
<body class="bg-neutral">
    <div class="container-app">
        <!-- 顶部导航栏 -->
        <header class="bg-white sticky top-0 z-10 border-b border-gray-100 shadow-soft">
            <div class="px-4 py-3 flex items-center gap-3">
                <button onclick="window.location.href='../index.html'" class="w-8 h-8 rounded-lg hover:bg-gray-100 flex items-center justify-center transition-colors">
                    <i class="fa fa-arrow-left text-text-primary"></i>
                </button>
                <h1 class="text-base font-bold flex-1 text-text-primary">热门服务</h1>
                <button class="w-8 h-8 rounded-lg hover:bg-gray-100 flex items-center justify-center transition-colors">
                    <i class="fa fa-search text-text-primary"></i>
                </button>
            </div>
        </header>
        
        <!-- 筛选栏 -->
        <div class="px-4 py-3 bg-white border-b border-gray-100">
            <div class="flex gap-2 overflow-x-auto no-scrollbar">
                <button class="px-4 py-1.5 rounded-full bg-primary text-white text-xs font-medium whitespace-nowrap">
                    全部
                </button>
                <button class="px-4 py-1.5 rounded-full bg-gray-100 text-text-secondary text-xs font-medium whitespace-nowrap hover:bg-gray-200 transition-colors">
                    办公场地
                </button>
                <button class="px-4 py-1.5 rounded-full bg-gray-100 text-text-secondary text-xs font-medium whitespace-nowrap hover:bg-gray-200 transition-colors">
                    金融贷款
                </button>
                <button class="px-4 py-1.5 rounded-full bg-gray-100 text-text-secondary text-xs font-medium whitespace-nowrap hover:bg-gray-200 transition-colors">
                    劳务派遣
                </button>
                <button class="px-4 py-1.5 rounded-full bg-gray-100 text-text-secondary text-xs font-medium whitespace-nowrap hover:bg-gray-200 transition-colors">
                    物流代办
                </button>
                <button class="px-4 py-1.5 rounded-full bg-gray-100 text-text-secondary text-xs font-medium whitespace-nowrap hover:bg-gray-200 transition-colors">
                    农机服务
                </button>
            </div>
        </div>
        
        <!-- 服务列表 -->
        <main class="px-4 py-3 pb-20">
            <div class="space-y-3" id="service-list">
                <!-- 服务卡片将通过JavaScript动态生成 -->
            </div>
        </main>
        
        <!-- 底部导航 -->
        <div id="bottom-nav"></div>
        <div id="publish-modal-container"></div>
    </div>
    
    <script src="../js/common.js"></script>
    <script src="../js/navigation.js"></script>
    <script src="../js/components.js"></script>
    <script src="../js/animate.js"></script>
    <script>
        // 服务数据
        const servicesData = [
            {
                id: 1,
                image: 'https://images.unsplash.com/photo-1625246333195-78d9c38ad449?w=120&h=120&fit=crop',
                title: '专业农机服务 - 耕地播种一站式',
                desc: '提供专业农机服务，包括耕地、播种、收割等全流程服务，设备先进，经验丰富',
                tag: '农机服务',
                tagColor: 'bg-primary/10 text-primary',
                price: '200/亩起',
                views: '1.2k',
                user: '张**',
                phone: '138****5678',
                time: '2小时前'
            },
            {
                id: 2,
                image: 'https://images.unsplash.com/photo-1574943320219-553eb213f72d?w=120&h=120&fit=crop',
                title: '现代化办公场地出租',
                desc: '位于城市中心，交通便利，配套完善，适合各类农业企业办公使用',
                tag: '办公场地',
                tagColor: 'bg-secondary/10 text-secondary',
                price: '3000/月起',
                views: '856',
                user: '李**',
                phone: '159****8765',
                time: '5小时前'
            },
            {
                id: 3,
                image: 'https://images.unsplash.com/photo-1579621970563-ebec7560ff3e?w=120&h=120&fit=crop',
                title: '农业金融贷款服务',
                desc: '专注农业领域的金融服务，利率优惠，审批快速，助力农业发展',
                tag: '金融贷款',
                tagColor: 'bg-accent/10 text-accent',
                price: '最高500万',
                views: '2.1k',
                user: '王**',
                phone: '186****2345',
                time: '1天前'
            },
            {
                id: 4,
                image: 'https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=120&h=120&fit=crop',
                title: '物流配送代办服务',
                desc: '专业的农产品物流配送服务，覆盖全国主要城市，保证时效和品质',
                tag: '物流代办',
                tagColor: 'bg-primary/10 text-primary',
                price: '按距离计费',
                views: '1.5k',
                user: '赵**',
                phone: '187****4321',
                time: '1天前'
            },
            {
                id: 5,
                image: 'https://images.unsplash.com/photo-1593113598332-cd288d649433?w=120&h=120&fit=crop',
                title: '农产品代销服务',
                desc: '帮助农户销售农产品，渠道广泛，价格优惠，让优质农产品走向市场',
                tag: '农产代销',
                tagColor: 'bg-accent/10 text-accent',
                price: '佣金10%',
                views: '980',
                user: '孙**',
                phone: '135****6789',
                time: '2天前'
            },
            {
                id: 6,
                image: 'https://images.unsplash.com/photo-1464226184884-fa280b87c399?w=120&h=120&fit=crop',
                title: '农业劳务派遣服务',
                desc: '提供专业的农业劳务人员，经验丰富，工作认真负责，解决用工难题',
                tag: '劳务派遣',
                tagColor: 'bg-secondary/10 text-secondary',
                price: '150/天起',
                views: '1.8k',
                user: '周**',
                phone: '177****9876',
                time: '3天前'
            }
        ];

        // 渲染服务列表
        function renderServiceList() {
            const container = document.getElementById('service-list');
            if (!container) return;

            container.innerHTML = servicesData.map(service => `
                <div class="bg-white rounded-2xl shadow-soft border border-gray-100 hover:shadow-medium transition-all p-4" onclick="event.target.tagName !== 'BUTTON' && (window.location.href='service-detail.html')">
                    <div class="flex gap-3 mb-3">
                        <img src="${service.image}" 
                             alt="${service.title}" class="w-20 h-20 rounded-xl object-cover flex-shrink-0">
                        <div class="flex-1 min-w-0">
                            <h3 class="text-sm font-bold text-text-primary mb-1 truncate">${service.title}</h3>
                            <p class="text-xs text-text-secondary mb-2 line-clamp-2">${service.desc}</p>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-2">
                                    <span class="text-xs px-2 py-0.5 ${service.tagColor} rounded">${service.tag}</span>
                                    <span class="text-xs text-text-secondary"><i class="fa fa-eye mr-1"></i>${service.views}</span>
                                </div>
                                <div class="text-sm font-bold text-primary">¥${service.price}</div>
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center justify-between pt-3">
                        <div class="flex items-center gap-4 text-xs text-text-secondary">
                            <span><i class="fa fa-user-circle mr-1"></i>${service.user}</span>
                            <span><i class="fa fa-phone mr-1"></i>${service.phone}</span>
                            <span><i class="fa fa-clock-o mr-1"></i>${service.time}</span>
                        </div>
                        <button onclick="event.stopPropagation(); Components.showContactModal('${service.user}', '${service.phone}')" class="px-3 py-1.5 bg-primary text-white text-xs rounded-lg hover:bg-primary-dark transition-colors">
                            联系我
                        </button>
                    </div>
                </div>
            `).join('');
        }

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化组件
            Components.initComponents('service');
            
            // 渲染服务列表
            renderServiceList();
            
            // 初始化按钮反馈
            CommonUtils.initButtonFeedback();
        });
    </script>
</body>
</html>
